/**
 * Created by liguangsong on 16/8/13.
 */
import '../../css/container/page.css'
import React from 'react'
import { connect } from 'react-redux'
import { selectLast, selectNext, selectPage } from '../../action/select_page.js'
import { hashHistory } from 'react-router'

var Page = React.createClass({
    getInitialState() {
        return null;
    },

    getFirstPageView() {
        var view = [];
        view.push( <span key={"1"} className="page_button">{1}</span>);
        for (var i = 2; i <= this.props.length; i++) {
            view.push(<a key={i} onClick={this.handleClick} className="page_button">{i}</a>);
        }
        view.push(<a key={"next"} onClick={this.handleClick} className="page_button" style={{padding:"9px 25px", margin: '0 0 0 23px'}}>{">"}</a>);
        return view;
    },

    getLastPageView() {
        var view = [];
        view.push(<a  key={"last"} onClick={this.handleClick} className="page_button" style={{padding:"9px 25px", margin: '0 28px 0 0'}}>{"<"}</a>);
        for (var i = 1; i <= (this.props.length - 1); i++) {
            view.push(<a key={i} onClick={this.handleClick} className="page_button">{i}</a>);
        }
        view.push( <span key={this.props.length} className="page_button">{this.props.length}</span>);

        return view;
    },

    getCommontPageView() {
        var view = [];
        view.push(<a key={"last"} onClick={this.handleClick} className="page_button" style={{padding:"9px 25px", margin: '0 28px 0 0'}}>{"<"}</a>);
        for (var i = 1; i <= this.props.length; i++) {
            if (i == this.props.page) {
                view.push(
                    <span key={"i"} className="page_button">{i}</span>
                )
            }
            else {
                view.push(
                    <a key={i} onClick={this.handleClick} className="page_button">{i}</a>
                )
            }
        }
        view.push(<a key={"next"} onClick={this.handleClick} className="page_button" style={{padding:"9px 25px", margin: '0 0 0 23px'}}>{">"}</a>);

        return view;
    },

    getButtonView() {
        var length = this.props.length;
        switch(this.props.page) {
            case 1: {
                return (
                    this.getFirstPageView()
                );
            }
            case length: {
                return (
                    this.getLastPageView()
                );

            }
            default : {
                return (
                    this.getCommontPageView()
                );
            }
        }
    },

    handleClick(event) {
        var select = event.target.text;
        var path;
        switch(select) {
            case "<": {
                this.props.dispatch(selectLast());
                path = "/" + (this.props.page - 1);
                document.getElementById('body').scrollTop = 0;
                hashHistory.push(path);
                break;
            }
            case ">": {
                this.props.dispatch(selectNext());
                path = "/" + (this.props.page + 1);
                document.getElementById('body').scrollTop = 0;
                hashHistory.push(path);
                break;
            }
            default: {
                this.props.dispatch(selectPage(select));
                path = "/" + select;
                document.getElementById('body').scrollTop = 0;
                hashHistory.push(path);
            }

        }
    },

    handleInputChange(event) {
        console.log(document.getElementById('page_input').value);
        if (event.target.value <= 0) {
            document.getElementById('page_input').value = "";
        }
        if (event.target.value > this.props.length) {
            document.getElementById('page_input').value = this.props.length;
        }
    },


    handleSubmit(event) {
        switch(document.getElementById('page_input').value) {
            //case 0: {
            //    this.props.dispatch(selectPage(0));
            //    document.getElementById('body').scrollTop = 0;
            //    break;
            //}
            case this.props.page: {
                break;
            }
            default : {
                this.props.dispatch(selectPage(document.getElementById('page_input').value));
                document.getElementById('body').scrollTop = 0;
            }
        }
        document.getElementById('page_input').value = "";
    },


    inputBlur() {
        document.getElementById('page_input').value = "";
    },


    toTop() {
        document.getElementById('body').scrollTop = 0;
    },



    render() {
        return (
            <div className="page" >
                { this.getButtonView() }
                <form onSubmit={this.handleSubmit} className="page_jump">
                    <em>跳转至</em>
                    <input id="page_input" onBlur={this.inputBlur} onChange={this.handleInputChange}/>
                </form>
                <img src="app/assist/to_top.png" onClick={this.toTop} />
            </div>
        )
    }
});

function select(state) {
    return {
        page: state.selectPage.page
    }
}

export default connect(select)(Page);